<template>
    <view class="room br-24">
        <view class="room-title align-center ft-30 c-m bold">
            <view class="br-21 room-title-img">
                <hj-image src="icons-32.png" height="36rpx" width="36rpx" mode="aspectFit" />
            </view>
            <view class="flex-auto pl-12">{{ hotelInfo.addressName || '懿家酒店' }}</view>
        </view>
        <view class="pl-30 pr-30 t-3 ft-28">
            <view class="align-center space-between ft-32 pt-24 pb-16">
                <view class="bold">
                    {{ startTime || '' }} {{ getWeek(checkInInfo.startDate) }}
                    <text class="t-9"> - </text>
                    {{ endTime || '' }} {{ getWeek(checkInInfo.endDate) }}
                </view>
                <view class="ft-28">{{ checkInInfo.nightsCount || 1 }}晚</view>
            </view>
            <view class="ft-32">{{ info.name || '-' }}</view>
            <view class="t-9 mt-10">
                <text v-for="(item, index) in roomTypeInfoDetailResp?.bedTypeList" :key="index">
                    <template v-if="index > 0">+</template>
                    {{ item.bedNum || 1 }}张{{ item.bedWidth || '1' }}米{{ item.bedType || '床' }}
                </text>
                <text> | {{ roomTypeInfoDetailResp?.breakfastCount }}份早餐</text>
            </view>
            <view class="room-bot align-center mt-20">
                放心订！入住当天{{
                    formatDate(info?.hotelPolicy?.freeCancelHours || '', '20:00')
                }}前可免费取消！
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description
 * @author yinzhi
 * @date 2025-05
 */
import { computed, defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'RoomInfo'
})
// 接收父组件传值
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    }
})

const roomTypeInfoDetailResp = computed(() => props.info.roomTypeInfoDetailResp || {}) //房型相关信息

import { useStore } from 'vuex'
const store = useStore()
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 入住时间
const startTime = computed(() => dayjs(checkInInfo.value.startDate).format('MM月DD日') || '')
const endTime = computed(() => dayjs(checkInInfo.value.endDate).format('MM月DD日') || '')
// 酒店信息
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')
// 获取星期
const getWeek = date => {
    const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    return week[dayjs(date).day()]
}
// 时间格式处理
const formatDate = (date, defaultDate) => {
    try {
        const today = dayjs().format('YYYY-MM-DD')
        return dayjs(`${today} ${date}`).format('HH:mm')
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return defaultDate
    }
}
</script>

<style scoped lang="scss">
.room {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-bot {
        height: 88rpx;
        border-top: 1px solid $uni-bg-color-hover;
    }
    &-title {
        background: rgba($color: $uni-color-primary, $alpha: 0.1);
        border-radius: 24rpx 24rpx 0 0;
        height: 88rpx;
        padding: 0 30rpx;
        &-img {
            background: #fff;
        }
    }
}
</style>
